<template>
  <div>
    <Row :gutter="10">
      <i-col span="24">
        <div>
          <vxe-toolbar :refresh="{query: reload}" custom>
            <template v-slot:buttons>
              <vxe-button v-if="hasAccessByKey('system_ad_position_save')" size="mini" icon="vxe-icon--plus" content="新增" @click="PositionAddEnable = true"></vxe-button>
<!--              <vxe-button v-if="hasAccessByKey('system_ad_position_del')" size="mini" status="danger" icon="iconfont icon-delete-fill" style="margin-left: 10px;"-->
<!--                          content="批量删除" @click="positionDel"></vxe-button>-->
            </template>
          </vxe-toolbar>
          <vxe-table
            style="margin-top: 10px;"
            id="toolbar_demo3"
            round
            :loading="loading"
            :custom-config="{storage: true}"
            :edit-config="{trigger: 'click', mode: 'row'}"
            highlight-current-row
            highlight-current-column
            @edit-closed="updateData"
            @checkbox-change="checkboxChange"
            @checkbox-all="checkboxChange"
            :data="tableData.result">
            <vxe-table-column type="checkbox" width="60"></vxe-table-column>
            <vxe-table-column field="id" title="ID" width="60"></vxe-table-column>

            <vxe-table-column v-if="hasAccessByKey('system_ad_position_edit')" field="name" title="广告位名称" width="200" :edit-render="{name: 'input'}"></vxe-table-column>
            <vxe-table-column v-else field="name" title="广告位名称" width="200"></vxe-table-column>

            <vxe-table-column v-if="hasAccessByKey('system_ad_position_edit')" field="position" title="广告位调用标识"></vxe-table-column>
            <vxe-table-column v-else field="position" title="广告位调用标识" ></vxe-table-column>

            <vxe-table-column v-if="hasAccessByKey('system_ad_position_edit')" field="position_desc" title="广告位描述" :edit-render="{name: 'input'}"></vxe-table-column>
            <vxe-table-column v-else field="position_desc" title="广告位描述" width="200"></vxe-table-column>

            <vxe-table-column field="status" title="状态" width="100" show-overflow>
              <template v-slot:default="{row}">
                <vxe-switch  v-model="row.status" on-label="启用" off-label="禁用"
                            @change="(value)=>{statusChange(row,value)}" :disabled="!hasAccessByKey('system_ad_position_edit')"></vxe-switch>
              </template>
            </vxe-table-column>

            <vxe-table-column field="address" title="操作" width="250">
              <template v-slot:default="{row}">
                <vxe-button v-if="hasAccessByKey('system_ad_list')" content="广告" @click="adManage(row)"></vxe-button>
                <vxe-button v-if="hasAccessByKey('system_ad_position_del')" icon="iconfont icon-delete-fill"
                            status="danger"
                            content="删除" @click="positionDel(row)"></vxe-button>
              </template>
            </vxe-table-column>
          </vxe-table>
        </div>
        <Spin size="large" fix v-if="spinShow"></Spin>
      </i-col>
    </Row>

    <Page :current="tableData.current"
          :total="tableData.total"
          :page-size="tableData.size"
          @on-change="pagerChange" @on-page-size-change="pageSizeChange" show-elevator show-sizer/>
    <template>
      <vxe-modal title="新增广告位" v-model="PositionAddEnable" resize remember transfer>
        <template v-slot>
          <position-add @adPositionSave="reload"></position-add>
        </template>
      </vxe-modal>
    </template>
    <template>
      <verify v-if="verifyInput" @confirm="confirmDelete"></verify>
    </template>
  </div>
</template>

<script>
import PasteEditor from '_c/paste-editor'
import { adPositionDel, adPositionList, adPositionEdit, adPositionSetVal, adPositionSave } from '@/api/ad'
import PositionAdd from './add'
import verify from '@/components/verify'

export default {
  name: 'setting_ad_position',
  components: {
    PasteEditor,
    PositionAdd,
    verify
  },
  data () {
    return {
      verifyInput: false,
      loading: false,
      PositionAddEnable: false,
      search: '',
      spinShow: false,
      tableData: [],
      selection: [],
      opRole: {}
    }
  },
  mounted () {
    this.reload()
  },
  methods: {
    checkboxChange (event) {
      this.selection = event.selection
    },
    reload () {
      this.loading = true
      this.AddEnable = false
      adPositionList({}).then(({ data, status }) => {
        this.tableData = data.data.position_list
        this.loading = false
      })
    },
    pagerChange (pager) {
      adPositionList({
        page: pager
      }).then(({ data, status }) => {
        this.tableData = data.data.position_list
        this.loading = false
      })
    },
    pageSizeChange (pageSize) {
      adPositionList({
        page_size: pageSize
      }).then(({ data, status }) => {
        this.tableData = data.data.position_list
        this.loading = false
      })
    },
    updateData (data) {
      adPositionSave(data.row).then(({ data, status }) => {
        this.$XModal.message({
          message: data.message,
          status: 'success',
          duration: 1000
        })
      }).catch((error) => {
        this.$XModal.alert({
          message: error.response.data.message,
          status: 'error'
        })
      })
    },
    statusChange (row, value) {
      adPositionSetVal({
        id: row.id,
        field: 'status',
        value: value.value ? 1 : 0
      }).catch((error) => {
        this.$XModal.alert({
          message: error.response.data.message,
          status: 'error'
        })
      })
    },
    positionDel (row) {
      if (!row.id) {
        let ids = []
        for (let key in this.selection) {
          ids.push(this.selection[key]['id'])
        }
        row.id = ids.join(',')
        if (!row.id) {
          this.$XModal.alert({
            message: '请选择要删除广告位.',
            status: 'warning'
          })
          return
        }
      }
      this.$XModal.confirm('该操作将删除该广告位，确认删除？', '删除').then(type => {
        if (type === 'cancel') {
          return
        }
        this.opRole = row
        this.verifyInput = false
        this.$nextTick(() => {
          this.verifyInput = true
        })
      })
    },
    confirmDelete (password) {
      adPositionDel({
        id: this.opRole.id,
        verifyPassword: password
      }).then(({ data, status }) => {
        this.$XModal.message({
          message: data.message,
          status: 'success',
          duration: 1000
        })
        this.reload()
      }).catch(({ response }) => {
        this.$XModal.alert({
          message: response.data.message,
          status: 'error'
        })
      })
    },
    adManage (position) {
      const route = {
        name: 'ad-list',
        params: {
          position: position.id
        },
        query: {
          name: position.name
        },
        meta: {
          title: `动态路由-${position.name}`
        }
      }
      this.$router.push(route)
    }
  }
}
</script>

<style scoped>

</style>
